<template>
  <div class="data_table">
    <div ref="mychart" id="mychart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts"

import { dataTableMethods } from 'common/mixin'

export default {
  name: 'data_table_bar',
  mixins: [ dataTableMethods ],
  mounted() {
    // TODO
    // 将所有图表的初始化封装进 mixin

    // 1.初始化
    let myEcharts = echarts.init(this.$refs.mychart)
    // 2.设置 echarts 数据
    let xData = ["衣装", "美妆", "鞋袜", "家纺"]
    let yData = [99, 69, 45, 77];
    let yData2 = [60, 40, 66, 50];
    // 3.设置配置项
    // echarts的容器
    // 字体适配：
    // 标题 title-textStyle
    // 图表开关文字 legend-textStyle
    // 图表开关 icon 大小 legend-itemHeight
    // x, y轴文字 xAxis-axisLabel
    // 柱上文字 series-laber
    // 鼠标悬浮提示文字 tooltip-textStyle
    let option = {
      title: {
        text: "周开销分析",
        textStyle: {
          fontSize: this.fontSize(18)
        }
      },
      color: ["#91c7ae", "#aaa"], // 改变 legend 颜色
      legend: {
        left: 'right',
        itemGap: this.fontSize(12), // 图例间隔
        itemHeight: this.fontSize(12),
        textStyle: {
          fontSize: this.fontSize(12)
        }
      },
      tooltip: { // 鼠标悬浮提示字体大小
        show: true,
        textStyle: {
          fontSize: this.fontSize(14)
        },
        position: this.changePosition()
      },
      xAxis: {
        type: "value",
        axisLabel: {
          fontSize: this.fontSize(12)
        }
      },
      yAxis: {
        data: xData,
        type: "category", // 坐标轴的类型: value数据轴 category类目轴
        axisLabel: {
          fontSize: this.fontSize(12)
        }
      },
      series: [
        {
          name: "本周开销",
          type: "bar",
          data: yData,
          label: {
            show: true,
            color: "#fff",
            fontSize: this.fontSize(12)
          },
          // 单独设置每个轴的颜色
          itemStyle: {
            normal: {
              color: function(parmas) {
                let colorList = [
                  "#c23531",
                  "#2f4554",
                  "#61a0a8",
                  "#91c7ae"
                ];
                return colorList[parmas.dataIndex]
              }
            }
          },
          // 图表的标线
          // markLine: {
          //   data: [
          //     {
          //       type: "average",
          //       name: "平均值",
          //     }
          //   ],
          //   label: {
          //     fontSize: this.fontSize(12)
          //   }
          // }
        },
        {
          name: "上周开销",
          type: "bar",
          data: yData2,
          // 单独设置每个轴的颜色
          itemStyle: {
            normal: {
              color: function(parmas) {
                let colorList = [
                  "#ddd",
                  "#ddd",
                  "#ddd",
                  "#ddd"
                ];
                return colorList[parmas.dataIndex]
              }
            }
          },
        },
      ]
    }
    // 4.绘制图表
    myEcharts.setOption(option)

    // 5.随浏览器窗口变动，变化大小
    window.onresize = function() {
      myEcharts.resize();
    }
  },
  methods: {

  }
}
</script>

<style scoped>
  .data_table {
    margin: 0 auto;
    width: 90%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
  }

  #mychart {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    border: 1px solid #eee;
  }
</style>
